<!--
 * @Description  : 文本超出显示省略号，并且显示tooltip
 *               : 支持自定义多行显示省略
 * @Autor        : 杜康
 * @Date         : 2023-05-15 09:58:41 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-05-15 10:06:29 +0800
-->
<script lang="ts" setup>
/**
 * usage：
 *  1、<BaseElliTip>显示文本</BaseElliTip>
 *  2、<BaseElliTip text="显示文本"></BaseElliTip>
 *  3、<BaseElliTip content="显示文本">显示文本</BaseElliTip>
 *  4、<BaseElliTip :lineNumber="3">显示文本</BaseElliTip>
 */
import { computed, ref } from "vue";

interface IProps {
  // 显示内容
  text?: string;
  // 显示位置
  placement?: string;
  // tip内容
  content?: string;
  // 要显示的行数
  lineNumber: number;
}

const prop = withDefaults(defineProps<IProps>(), {
  placement: "top",
  lineNumber: 1
});

let showTooltip = ref(true);

function onMouseEnter(e) {
  const dom = e.target;
  console.log(
    dom.getBoundingClientRect().width,
    dom.clientWidth,
    dom.offsetWidth,
    dom.scrollWidth,
    dom.parentElement.offsetWidth
  );
  console.log(dom.offsetHeight, dom.scrollHeight);
  // 单行会比较 dom.offsetWidth < dom.scrollWidth
  // 多行会比较 dom.offsetHeight < dom.scrollHeight
  showTooltip.value = !(dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight);
}
</script>

<template>
  <el-tooltip class="elli-tip-box" v-bind="$attrs" :disabled="showTooltip" :placement="placement">
    <template #content>
      <span v-if="content || text">{ { content || text } }</span>
      <span v-else><slot></slot></span>
    </template>

    <div
      :class="lineNumber > 1 ? 'text-ellipsis-multiple' : 'truncate'"
      @mouseenter.stop="onMouseEnter"
    >
      <slot>{ { text } }</slot>
    </div>
  </el-tooltip>
</template>

<style lang="less" scoped>
//多行文本文字超过行数限制后显示省略号
// caniuse兼容性（不支持IE）：https://caniuse.com/?search=-webkit-line-clamp
.text-ellipsis-multiple {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: v-bind("prop.lineNumber");
}
</style>
